<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>隐藏式侧边栏菜单</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            /* 初始化 */
            margin: 0;
            padding: 0;
        }

        body {
            /* 100%窗口高度 */
            height: 100vh;
            background-color: rgb(138, 130, 137);
        }

        .container {
            width: 30px;
            /* 设置左边显示（鼠标为选中时状态的宽度）*/
            height: 600px;
            /* 设置左边显示（鼠标为选中时状态的高度）*/
            /* 绝对固定定位 */
            position: fixed;
            left: 0px;
            /* 垂直居中 */
            top: 20%;
            /* transform: translateY(-50%); */
            background-color: #222;
            /* 右上右下圆角 */
            border-radius: 0 15px 15px 0;
            overflow: hidden;
            /* 溢出隐藏 */
            /* 动画过渡 */
            transition: 0.3s;
        }

        .container:hover {
            /* 鼠标移入，展开+改变圆角大小 */
            width: 130px;
            border-radius: 0 50px 50px 0;
        }

        .container:hover li a {
            /* 鼠标移入，改变字体颜色 */
            color: rgb(255, 255, 255);
        }

        /* 添加左侧橙色条状 */
        .container::before {
            content: "";
            width: 50%;
            /*鼠标悬停时显示左侧橙色条宽度*/
            height: 100%;
            /*鼠标悬停时显示左侧橙色条高度*/
            position: absolute;
            /*绝对定位*/
            top: 0px;
            left: 0px;
            z-index: -1;
            /* 将z轴设置为-1不让其遮挡图标*/
            background-color: rgb(255, 136, 0);
        }

        /* 设置上方快 */
        .container .top {
            width: calc(100% - 30px);
            /* 动态设置宽度：宽度比100%的宽度少30px。*/
            margin-left: 30px;
            /*左外间距设为30px与上面的.container{}中的width一致*/
            height: 20%;
            /*鼠标悬停时从20%开始计算（也就是第一个块）*/
            background-color: #222;
            /*设置跟着块的上方的块颜色*/
            border-radius: 0 0 0 20px;
            /*设置上方的黑块的左下角的弧度*/
            /* 动画过渡 */
            transition: 0.2s;
        }

        /* 这只中间快 */
        .container .middle {
            width: calc(100% - 60px);
            height: 10%;
            /*每次鼠标悬停时选中的部分为10%（也就是一个橙色的块）*/
            background-color: rgb(255, 136, 0);
            /*设置中间选择时的快的背景色*/
            margin-left: 30px;
            /*左外间距设为30px与上面的.container{}中的width一致*/
            border-radius: 20px;
            /*设置边角弧度*/
        }

        /* 设置下方块 原理上上方快一样*/
        .container .bottom {
            width: calc(100% - 30px);
            height: 100%;
            margin-left: 30px;
            background-color: #222;
            border-radius: 20px 0 0 0;
        }

        .container li {
            /* 绝对定位 */
            position: absolute;
            /* 通过var函数调用自定义属性--lqj */
            top: var(--lqj);
            width: 100%;
            height: 10%;
            font-size: 30px;
            /* 弹性布局 水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container li a {
            /* 字体颜色透明 */
            color: transparent;
            /* 动画过渡 */
            transition: 0.3s;
        }

        /* 分别为每一个li元素设置.top的高度 */
        /* ~是兄弟选择器 */
        .container li:nth-child(1):hover~.top {
            height: 20%;
        }

        .container li:nth-child(2):hover~.top {
            height: 30%;
        }

        .container li:nth-child(3):hover~.top {
            height: 40%;
        }

        .container li:nth-child(4):hover~.top {
            height: 50%;
        }

        .container li:nth-child(5):hover~.top {
            height: 60%;
        }

        .container li:nth-child(6):hover~.top {
            height: 70%;
        }
    </style>
</head>

<body>
    <div class="container"> <!-- --lqj是自定义属性，通过var函数可调用 -->
        <li style="--lqj:20%;"> <a href="#"> <i class="fa fa-home" aria-hidden="false"></i> </a> </li>
        <li style="--lqj:30%;"> <a href="#"> <i class="fa fa-th-large" aria-hidden="true"></i> </a> </li>
        <li style="--lqj:40%;"> <a href="#"> <i class="fa fa-shopping-bag" aria-hidden="true"></i> </a> </li>
        <li style="--lqj:50%;"> <a href="#"> <i class="fa fa-user" aria-hidden="true"></i> </a> </li>
        <li style="--lqj:60%;"> <a href="#"> <i class="fa fa-cog" aria-hidden="true"></i> </a> </li>
        <li style="--lqj:70%;"> <a href="#"> <i class="fa fa-sign-out" aria-hidden="true"></i> </a> </li>
        <div class="top"></div>
        <div class="middle"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>